<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        body{
            background-color: antiquewhite;
        }
        table,th,tr,td{
            border: 1px solid;
            border-collapse: collapse;
            text-align: center;
            padding: 10px
        }
        .calculator{
            display:flex;
            align-items: center;/*垂 直 居 中*/
            justify-content: center;/*水 平 居 中*/
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="calculator">
    <div>
        <form action="/calculate" method="post">
            <table>
                <tr><td colspan="2">计算器 </td></tr>
                <tr>
                    <!--<td>请 输 入 第 一 个数 </td>-->
                    <td><input name="firstNum" type="number">
                    </td>
                </tr>
                <tr>
                    <!--<td>请 选 择 操 作符 </td>-->
                    <td>
                        <select name="operator">
                            <option value="+">+</option>
                            <option value="-">-</option>
                            <option value="*">*</option>
                            <option value="/">÷</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <!--td>请 输 入 第 二 个数 </td>-->
                    <td><input name="secondNum" type="number">
                    </td>
                </tr>
                <tr>
                    <td ><input type="submit" value="计 算"> <input
                            type="reset" value="清 除"
                            onclick="clearText()"></td></tr>
                <tr>  <td style="text-align: left;" id="answer">结 果：
                    <span th:text="${result} ?:''"></span>
                </td>
                </tr>
                <tr></tr>
            </table>
        </form>
    </div>
</div>
</body>
<script th:inline="javascript">
    /*<![CDATA[*/
    function clearText()
    {
        document.getElementById("answer").innerHTML="";
    }
    /*]]>*/
</script>
</html>

